<template>
<div class="edit-head">
    <el-dropdown-item @click.native="formVisible = true">修改密码</el-dropdown-item>
    <el-dialog title="修改密码" :append-to-body="true" :visible.sync="formVisible" :before-close="handleClose">
        <el-form :model="dataForm" :rules="rules" ref="dataForm">
            <el-form-item label="手机号码" :label-width="formLabelWidth">
                <el-input v-model="form.mobile"  :readonly="true"  maxlength="11"
  show-word-limit ></el-input>
            </el-form-item>
            <el-form-item label="验证码" prop="msgNum" :label-width="formLabelWidth">
                <el-col :span="12">
                    <el-input v-model="dataForm.msgNum" ></el-input>
                </el-col>
                <el-col :span="6" :offset="1">
                    <el-button type="default" @click="sendMsg('dataForm')">获取验证码</el-button>
                </el-col>
            </el-form-item>
            <el-form-item label="新密码" :label-width="formLabelWidth" prop="password">
                <el-input type="password" v-model="dataForm.password" maxlength="18"
  show-word-limit ></el-input>
            </el-form-item>
            <el-form-item label="确认密码" :label-width="formLabelWidth" prop="checkPass">
                <el-input type="password" v-model="dataForm.checkPass" maxlength="18"
  show-word-limit></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="warning" @click="formVisible = false">关 闭</el-button>
            <el-button type="primary" @click="sendPassword('dataForm')">修 改</el-button>
        </div>
    </el-dialog>
</div>
</template>

<script>
export default {
    name: "editHead",
    props: {
        form: {
            type: Object,
        },
    },
    data() {
        var validCheckPhone = (rule, value, callback) => {
            if (!value) {
                return callback(new Error("手机号不能为空"));
            }
            if (!/^1[3456789]\d{9}$/.test(value)) {
                return callback(new Error("请输入正确的手机号码"));
            } else {
                return callback();
            }
        };

        var validatePass = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请输入密码"));
            } else {
                if (this.dataForm.checkPass !== "") {
                    this.$refs.dataForm.validateField("checkPass");
                }
                callback();
            }
        };
        var validatePass2 = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请再次输入密码"));
            } else if (value !== this.dataForm.password) {
                callback(new Error("两次输入密码不一致!"));
            } else {
                callback();
            }
        };
        return {
            rules: {
                userLoginName: [{
                    required: true,
                    validator: validCheckPhone,
                    trigger: "blur",
                }, ],
                msgNum: [{
                    required: true,
                    message: "验证码不能为空",
                    trigger: "blur",
                }, ],
                password: [
                  {
                    required: true,
                    message: "密码不能为空",
                    trigger: "blur",
                },{
                    validator: validatePass,
                    trigger: "blur",
                }, ],
                checkPass: [{
                    required: true,
                    validator: validatePass2,
                    trigger: "blur",
                }, ],
            },
            dataForm: this.form,
            editUserPassWord: {
                hash: "",
                tamp: "",
                msgNum: "",
                mobile: "",
                type: 1
            },
            formVisible: false,
            value: "",
            disabled: false,
            formLabelWidth: "120px",
        };
    },
    computed: {},
    methods: {
        handleClose(done) {
            this.$confirm("确认关闭？")
                .then((_) => {
                    done();
                })
                .catch((_) => {});
        },
        sendMsg() {
            if (!/^1[3456789]\d{9}$/.test(this.form.mobile)) {
                this.$message({
                    type: "warning",
                    message: "请输入正确的手机号码",
                    duration: 2000,
                });
                return false;
            } else {
                this.$axios
                    .post("/uaa/user/sendMsg", {
                        params: {
                            sendType: 1,
                            mobile: this.form.mobile,
                        },
                    })
                    .then((res) => {
                        console.log(res)
                        this.editUserPassWord = res
                        this.editUserPassWord.mobile = this.form.mobile
                        this.$message({
                            type: "warning",
                            message: res.validateNum,
                            duration: 2000,
                        });
                    });
            }
        },
        sendPassword(formName) {
            this.editUserPassWord.type = 1
            this.editUserPassWord.msgNum = this.editUserPassWord.validateNum
            this.editUserPassWord.password = this.dataForm.password
            console.log(this.editUserPassWord)
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$axios.post('uaa/user/resetPasswd', {
                            params: this.editUserPassWord
                        })
                        .then((res) => {
                          this.$message({
                            type: "success",
                            message: '密码修改成功',
                            duration: 2000,
                        });
                        })
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.edit-head {
    display: inline;

    .flex {
        display: flex;
        justify-content: space-between;
    }
}
</style>
